<template>
    
    <el-dialog v-model="NewUserDataEn" title="Add">
        <!-- -------------------------         分界线 1     --------------------------------------->
        <el-divider content-position="center">添加用户</el-divider>
        <div class="ml-60">
        <el-form :model="NewUserData" :label-position="right" label-width="120px" style="max-width: 400px">
            <el-form-item label="AccountNumber" >
                <el-input v-model="NewUserData.AccountNumber" autocomplete="off" />
            </el-form-item>
            <el-form-item label="UserName" >
                <el-input v-model="NewUserData.UserName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="Password" >
                <el-input v-model="NewUserData.Password" autocomplete="off" />
            </el-form-item>
        </el-form>
      </div>
        <!-- -------------------------         分界线 2    --------------------------------------->
        <el-divider content-position="center">功能权限</el-divider>

        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>

        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :key="city" :label="city">{{city}}</el-checkbox>
        </el-checkbox-group>

        <!-- -------------------------         分界线 3    --------------------------------------->
        <el-divider content-position="center">通道</el-divider>

        <el-checkbox v-model="checkAllChannel" :indeterminate="isIndeterminateChannel" @change="handleCheckAllChangeChannel">Check all</el-checkbox>

        <el-checkbox-group v-model="checkedChannel">
            <el-checkbox v-for="city in Channels" :key="city" :label="city">{{city}}</el-checkbox>
        </el-checkbox-group>


        <!-- -------------------------         确定按钮     --------------------------------------->
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="add_fun">确定</el-button>
            </span>
        </template>

    </el-dialog>

    <!---------------------------------- 公共按钮 --------------------------------->
    
    <div class="mt-2 flex justify-end" >
        <el-button >查询</el-button>
        <el-button @click="NewUserDataEn = true" >新增</el-button>
    </div>

    <!---------------------------------- 查询结果 --------------------------------->
    <div class="mt-4 border-2">
        <div  style="height:calc(66vh);">

            <el-table :data="tableData" border :header-cell-style="{background:'#F3F4F7'}">
            <el-table-column prop="Id"            label="Id"        align="center"/>
            <el-table-column prop="AccountNumber" label="账号"      align="center"/>
            <el-table-column prop="UserName"      label="名称"      align="center"/>
            <el-table-column prop="CreationTime"  label="创建时间"  align="center"/>

            <el-table-column prop="monitoring"    label="操作"      align="center">
                <template #default>
                    <el-button text class="hover:text-blue-400">修改</el-button>
                    <el-button text class="hover:text-rose-500 ">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
        <!---------------------------------- 分页表 --------------------------->
        <div class="flex flex justify-center mb-2">
            <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
    </div>
  </template>
  
<script setup>
  import { Microphone, Mute } from '@element-plus/icons-vue'
  import { ref,reactive } from 'vue'
  const handleClick = () => {
    console.log('click')
  }
  const currentPage = ref(1)
  const pageSize = ref(20)
  const total = ref(400)
  const NewUserDataEn = ref(null)
  const NewUserData = reactive({
    AccountNumber:'admin',
    UserName:'admin',
    Password:'123456',
  })

  const tableData = [
    {
        Id: '1',
        AccountNumber: 'admin',
        UserName: 'admin',
        CreationTime: '1918',
    },
    {
        Id: '2',
        AccountNumber: 'admin2',
        UserName: 'admin2',
        CreationTime: '1918',
    },
  ]

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['查询', '播放'])
const cities = ['查询', '播放', '监听', '删除','下载', '用户管理', '添加用户', '增加用户','修改用户', '删除用户', '修改密码', '系统设置','录音设置', '同步时间', '修改IP', '重启/关闭设备']

const checkAllChannel = ref(false)
const isIndeterminateChannel = ref(true)
const checkedChannel = ref(['通道1', '通道2'])
const Channels = ['通道1', '通道2', '通道3', '通道4','通道5', '通道6', '通道7', '通道8','通道9', '通道10', '通道11', '通道12','通道13', '通道14', '通道15', '通道16']


const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}

const handleCheckAllChangeChannel = (val) => {
  checkedChannel.value = val ? Channels : []
  isIndeterminateChannel.value = false
}

const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}

  function handleSizeChange(e)
  {
    console.log('handleSizeChange',e);
  }
  function handleCurrentChange(e)
  {
    console.log('handleCurrentChange',e);
  }
  function add_fun (){
    
    console.log('---add_fun',checkedCities.value,checkedChannel.value,NewUserData);
    NewUserDataEn.value = false
  }
</script>

<style scoped>
.table_s{
    @apply bg-gray-500 !important;
}

.tab_s{
    @apply pr-5 !important;
    align-self: center;
    text-align: end;
}


</style>